<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告管理</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .main{
            width: 100%;
            height: 100%;
            background: #fff;
        }
    </style>
    <!-- layui -->
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" />
</head>
<body>
<div class="main">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
      <legend>公告管理</legend>
    </fieldset>
    <table class="layui-hide" id="test" lay-filter="demo"></table>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

</div>
<!-- layui -->
<script src="/plugins/layui/layui.js"></script>

<script>
layui.use(['laydate', 'laypage', 'layer', 'table', 'element'], function(){
  var laypage = layui.laypage //分页
  layer = layui.layer //弹层
  ,table = layui.table //表格
  ,element = layui.element; //元素操作
  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.msg('切换了：'+ this.innerHTML);
    console.log(data);
  });
  
  //执行一个 table 实例
  table.render({
    elem: '#test'
    ,height: 400
    ,url: '/notice/list'
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'index', title: '索引', width:130, sort: true, fixed: 'left'}
      ,{field: 'content', title: '内容', width:260}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //向服务端发送删除指令
          window.location.href = "/notice/delete/"+obj.data.content;
      });
    } else if(layEvent === 'edit'){
      layer.msg('编辑操作');
        window.location.href = "/notice/edit/"+obj.data.index;
    }
  });
});
</script>
</body>
</html>